<template>
    <div>
      <el-dialog title="兑换" :visible.sync="shareMeetDia" width="514px" center :close-on-click-modal="false">
          <div class="ex_top">
            可将自助厂商会权益"兑换成”自助上传视频上架权益”，兑换比例为1:4
          </div>
          <div class="ex_change">
            消耗 <span class="ex_span">可兑换的权限数:{{rootchangedata}}个</span>
          </div>
          <div class="ex_flex">
             <p>自助厂商会权限</p>
             <el-input-number v-model="num" @change="handleChange" :min="0" :max="rootchangedata" label="描述文字"></el-input-number>
          </div>
          <p class="ex_change">获得</p>
          <div class="ex_flex2">
             <span>自助上传视频上架权限</span>
             <span>兑换后权限数：{{getrootNum}}个</span>
          </div>
          <div style="text-align: center;">
            <el-button type="primary" @click="exange">确定</el-button>
          </div>
        </el-dialog>
    </div>
  </template>
  
  <script>
import indexapi from '@/api/index'
  export default {
   props:{
    rootchangedata:Number
   },
    data(){
      return{
          shareMeetDia:false,
          num:0,
          root:4,
      }
    },
    computed:{
        getrootNum(){
            return this.num*4
        }
    },
    methods:{
        handleChange(value) {
        console.log(value);
      },
      exange(){
        if(this.getrootNum==0){
          this.$message({type:'error',message:'请输入兑换个数'})
          return false
        }
        let form={
          exchangeNum:this.getrootNum
        }
        indexapi.video.exchangeSelfMeetingToVideo(form).then(res=>{
          this.$message({type:'success',message:'兑换成功！'})
          this.shareMeetDia=false
          this.$emit('reflashRoot',true)
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
.ex_top{

font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #A3ADB7;
line-height: 16px;
margin-bottom: 18px;
margin-top: 6px;
}
  .ex_change{

font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #37474F;
line-height: 16px;
margin-bottom: 12px;
.ex_span{
    padding-left: 14px;
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #0C7FF2;
line-height: 16px;
}
  }
  .ex_flex{
    @include flex(row, center, space-between);
    padding: 16px 14px;
background: #F8F9FA;
border-radius: 0px 0px 0px 0px;
border: 1px solid #0C7FF2;
margin-bottom: 20px;
  }
  .ex_flex2{
    @include flex(row, center, space-between);
    padding: 20px 14px;
background: #F8F9FA;
border-radius: 0px 0px 0px 0px;
border: 1px solid #E4E8EC;
margin-bottom: 20px;
  }
  ::v-deep .el-dialog__header {
    background: #f5f8fc;
    text-align: left;
    font-size: 16px;
    color: #202933;
    padding: 11px 16px;
  }

  
  ::v-deep .el-dialog__body {
    padding: 5px 20px 32px  !important;
  }
  
  ::v-deep .el-dialog__title {
    font-size: 16px;
  }
  ::v-deep .el-input-number:hover{
    border: none;
  }
  ::v-deep .el-input-number{
    border: none;
    width: 120px;
  }
  ::v-deep .el-input-number .el-input__inner{
    border: none;
  }
  ::v-deep .el-input-number__decrease:hover{
    border: none;
  }
  ::v-deep .el-input-number__increase:hover{
    border: none;
  }
  ::v-deep .el-input-number__decrease{
    border: none;
  }
  ::v-deep .el-input-number__increase{
    border: none;
    background: rgb(64 158 255 / 50%);
    color: #fff;
  }
  ::v-deep .el-input-number__decrease{
    background: rgb(64 158 255 / 50%);
    color: #fff;
  }
  </style>